<template>
  <div class="new-song-wrap" @click="addSong(song)">
    <div class="avater">
      
      <el-image  :src="song.album.picUrl" fit="cover"></el-image>
    </div>
    <div class="song-info">

      <p>

        {{song.name}}

        <span  v-if="song.subtitle" class="song-info-subtitle">({{song.alias}})</span>
      </p>
      <p class="song-info-author">{{song.artists[0].name}}</p>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from "vue";
import { getSongUrl} from '../../hooks/song-url'
import { useStore } from 'vuex'
import {createSong} from '../../class/Song'
export default defineComponent({
  setup(props) {

    // console.log(props.song);

    const store = useStore();

    const addSong = (songInfo) => {
        console.log("往播放列表中添加一首歌曲");
        console.log("songInfo",songInfo);
        
        // songInfo.songUrl = getSongUrl(songInfo.id)
        const song =  createSong(songInfo)
        store.dispatch('addSong',song)
        // store.dispatch('changePlayState')
    }

    return {
        addSong
    };
  },
  props: {
    //指定接收的值，必须指定类型
    song: {
      type: Object,
    },
  },
});
</script>
 
<style lang = "scss" scoped>
@import "../../assets/css/home.scss";
</style>